import Breadcrumb from '../../components/Breadcrumb';
import { HomeOutlined } from '@ant-design/icons';
import { Divider } from 'antd';

// 面包屑例子
const BreadcrumbDemo = () => {
    return (
        <div className='p-20'>
            <h3 className='m-b-20'>面包屑</h3>
            <Divider orientation="left">基础用法</Divider>
            <Breadcrumb
                items={[
                    {
                        title: <HomeOutlined />,
                    },
                    {
                        title: 'Application Center',
                    },
                    {
                        title: 'Application List',
                    },
                    {
                        title: 'An Application',
                    },
                ]}
            />
            <Divider orientation="left">修改分隔符</Divider>
            <Breadcrumb
                className='test-p'
                items={[
                    {
                        title: 'Home',
                        className: 'test',
                    },
                    {
                        title: 'Application Center',
                    },
                    {
                        title: 'Application List',
                    },
                    {
                        title: 'An Application',
                        separator: '==>',
                    },
                ]}
                separator='>'
            />
            <Divider orientation="left">跳转和事件</Divider>
            <Breadcrumb
                className='test-p'
                items={[
                    {
                        title: 'Home',
                        className: 'test',
                        path: '/home',
                    },
                    {
                        title: 'Application Center',
                        href: 'https://www.baidu.com',
                    },
                    {
                        title: 'Application List',
                        onClick: () => { alert(1) },
                    },
                    {
                        title: 'An Application',
                        separator: '==>',
                    },
                ]}
                separator='>'
            />
        </div>
    );
};

export default BreadcrumbDemo;
